import { View, Text, Navigator } from "@tarojs/components"
import XLoadMore from '../../../components/XLoadMore'
import { useRef, useState } from "react"


import './index.scss'
import { chargeLogApi } from '../../../services/ChargeLog'
import { formatChargeQuantitytoText } from "../../../utils"


export default() => {
    let loadMoreRef = useRef(null)
    let [logList, setLogList] = useState<ChargeOrder[]>([])

    function loadChargeLog(rows:ChargeOrder[]) {
        rows.forEach(row => {
            //row.consumeQuantity = formatChargeQuantitytoText(row.consumeQuantity)
            logList.push(row)
        })
        
        setLogList([...logList])
    }



    return (
        <View className='page'>
            <View className='p-l-r'>
                {
                    logList.map(log => <Navigator  url={'/userClient/pages/chargeLog/detail/index?orderNo=' + log.orderNo} className='log-item'>
                        <View>设备号：<Text user-select>{log.deviceId}</Text></View>
                        <View className='m-t-6'>订单号：<Text user-select>{log.orderId}</Text></View>
                        <View className='m-t-6'>开始充电时间：{log.createTime}</View>
                        {/* <View className='m-t-6'>充电时长：<Text className='color-bd1c1c'>{log.consumeQuantity}</Text>，耗电量：<Text className='color-bd1c1c'>{log.consumeEnery}度</Text></View>
                        <View className='m-t-6'>实付款：<Text className='color-bd1c1c'>{log.factAmount}元</Text></View> */}
                    </Navigator>)
                }
            </View>
            <View className='p-l-r'>
                <XLoadMore keyName='orderId' ref={loadMoreRef} onClick={chargeLogApi} onFinish={loadChargeLog}></XLoadMore>
            </View>
        </View>
    )
}